<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../element-plus/index.css" />
    <style>
      .flex-grow {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :ellipsis="false"
        @select="handleSelect"
      >
        <el-menu-item index="0">LOGO</el-menu-item>
        <div class="flex-grow"></div>
        <el-menu-item index="1">Processing Center</el-menu-item>
        <el-sub-menu index="2">
          <template #title>Workspace</template>
          <el-menu-item index="2-1">item one</el-menu-item>
          <el-menu-item index="2-2">item two</el-menu-item>
          <el-menu-item index="2-3">item three</el-menu-item>
          <el-sub-menu index="2-4">
            <template #title>item four</template>
            <el-menu-item index="2-4-1">item one</el-menu-item>
            <el-menu-item index="2-4-2">item two</el-menu-item>
            <el-menu-item index="2-4-3">item three</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
      </el-menu>
    </div>

    <script src="../vue3.2.45.js"></script>
    <script src="../element-plus/element-plus.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            activeIndex: "1",
          };
        },
        methods: {
          handleSelect(key, keyPath) {
            console.log(key, keyPath);
          },
        },
      });

      // 使用组件
      app.use(ElementPlus);
      app.mount("#box");
    </script>
  </body>
</html>
